<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#app {
				width: 1200px;
				margin: 30px auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}

			.el-header {
				margin-top: 10px;
				height: 300px;
			}

			.name {
				height: 50px;
				position: sticky;
				top: 0px;
				z-index: 999;
				background-color: white;
				border: 2px solid #F8F8FF;
				margin-top: 0px;
			}

			.title {
				width: 150px;
				height: 40px;
				margin-top: 15px;
				text-align: center;
			}

			.add-data {
				width: 150px;
				height: 40px;
				margin-top: 8px;
				margin-left: 35px;
			}

			.search {
				width: 230px;
				height: 40px;
				margin-top: 7px;
				font-size: 15px;
			}

			.search_span {
				font-size: 15px;
				padding-left: 50px;
				margin-top: 15px;
			}

			.status {
				width: 350px;
				margin-top: 7px;
				height: 40px;
				font-size: 15px;
			}

			.search-icon {
				width: 600px;
				margin-top: 15px;
				height: 40px;
				font-size: 15px;
			}

			.el-main {}

			.main_text {
				width: 1100px;
				margin: 0 auto;
			}

			.el-footer {
				height: 40px;
			}

			.page {
				width: 550px;
				margin: 15px auto;
			}
			.el-link{
				display: block !important;
				width: 100%;
				height: 100%;
			}
			
			
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header class="name">
					<el-row>
						<el-col :span="21">
							<div class="title">
								<h3>教改项目管理</h3>
							</div>
						</el-col>
						<el-col :span="1">
							<div class="add-data">
								<el-button type="primary" @click="tianjia">
									添加
								</el-button>
<!-- 								<el-link href="addJiaoGai.html" style="color: black;"></el-link>
 -->							</div>
						</el-col>
					</el-row>

				</el-header>
				<!-- 页眉 -->
				<el-header>
					<el-row>
						<el-col :span="2">
							<div class="search_span">名称：</div>
						</el-col>
						<el-col :span="8">
							<div class="search">
								<el-input v-model="search_message" placeholder="请输入关键词"> </el-input>
							</div>
						</el-col>
						<el-col :span="11">
							<div class="status">
								<span>流程状态：</span>
								<el-select v-model="status_value" placeholder="请选择">
									<el-option  v-for="item in status"   :label="item.name" :value="item.name"></el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :span="3" style="margin-top: 20px;">
								<el-button type="primary" size="small" icon="el-icon-search"
									@click="search(search_message,status_value)">搜索</el-button>
						</el-col>
					</el-row>
				</el-header>
				<!-- 正文 -->
				<el-main>
					<el-row>
						<el-col :span="24">
							<div class="main_text">
								<template>
									<el-table :data="tableData" stripe border style="width: 100%" highlight-current-row>
										<el-table-column fixed  label="序号" width="50">
											<template slot-scope="scope">
											    <span>{{(pageindex-1)*page_sizes+scope.$index+1}}</span>
											</template>
										</el-table-column>
										<el-table-column prop="projectName" label="名称" width="400"></el-table-column>
										<el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
										<el-table-column prop="status" label="流程状态" width="100"></el-table-column>
										<el-table-column prop="node" label="审核状态" width="100"></el-table-column>
										</el-table-column>
										<el-table-column  label="操作" width="250" :align="'right'">
											<template slot-scope="scope">
												<el-button type="primary" size="mini" @click=edit(scope.row) v-show="scope.row.node==='审核未通过'">
													修改
												</el-button>
												<el-button type="danger" size="mini" @click=remove(scope.row)  v-show="scope.row.node==='审核未通过'">
													删除
												</el-button>
												<el-button type="primary" size="mini" @click=check(scope.row)>
													查看
												</el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
							</div>
						</el-col>
					</el-row>
				</el-main>
				<!-- 页尾 -->
				<el-footer>
					<el-row>
						<el-col :span="24">
							<div class="page">
								<el-pagination @current-change="handleCurrentChange"  :page-sizes="[page.size]"
									layout="total, sizes, prev, pager, next, jumper" :total="page.total" :current-page.sync="pageindex"
									:background="true"></el-pagination>
							</div>
						</el-col>
					</el-row>
				</el-footer>
			</el-container>
		</div>
	</body>
</html>
<script>
	//3:由Vue挂载elements
	new Vue({
		el: "#app",
		data: {
			id: "",
			search_message: "",
			status_value: "",
			page_sizes: 5,
			tableData: [1],
			status:[],
			page:"",
			pageindex:'',
			flag:true,
			show:false,
			config:{
				headers: {
					"token": ""
				}
			}
		},
		methods: {
			findAll: function(search_message, status_value) {
				let n={
					"pageindex":"",
					"key":"",
					"status":""
				}
				n.key=search_message
				n.status=status_value
				this.pageindex=1
				axios.post(window.gsau+"jiaogai/findjiaogai/",n,this.config).then((res) => {
					this.tableData = res.data.data.records
					this.page=res.data.data
					console.log(this.tableData)
					console.log(this.page)
				})
				
				axios(window.gsau+"status/findall",this.config).then((res)=>{
					this.status=res.data.data
					console.log(this.status)
				})
			},
			search: function(search_message, status_value) {
				this.findAll(search_message,status_value)
			},
			
			remove: function(row) {
				this.$confirm("确认删除该条数据吗？", "提示", {type: 'info'})
					.then(() => {
						this.id = row.id
						axios.delete(window.gsau+"jiaogai/delete/" + row.id,this.config)
							.then((res) => {
								console.log(res)
								if (res.data.code == 20010) {
									this.$message.info("删除成功")
									console.log(res)
								} else {
									this.$message.error("删除失败")
								}
							}).finally(() => {
								if(this.tableData.length===1){
									this.handleCurrentChange(this.pageindex-1)
								}else{
									this.handleCurrentChange(this.pageindex)
								}
							})
					}).catch(() => {
						this.$message.info("取消删除操作")
					})
			},
			edit:function(row){
				this.id=row.id
				localStorage.setItem("id",this.id)
				window.location.href = "editJiaoGai.html"
			},
			check: function(row) {
				this.id = row.id
				localStorage.setItem("id", this.id)
				window.location.href = "chaKanJiaoGai.html"
			},
			
			handleCurrentChange:function(val){
				let n={
					"pageindex":"",
					"key":"",
					"status":""
				}
				n.key=this.search_message
				n.status=this.status_value
				n.pageindex=val
				this.pageindex=val
				axios.post(window.gsau+"jiaogai/findjiaogai/",n,this.config).then((res) => {
					this.tableData=res.data.data.records
					this.page=res.data.data
					console.log(this.tableData)
				})
			},
			tianjia:function(){
				window.location.href="addJiaoGai.html"
			}
		},
		created: function() {
			this.config.headers.token = sessionStorage.getItem("token")
			this.findAll()
		},
	})
</script>
